<template>
  <Picker
    :data="emojiIndex"
    title="选择表情符号"
    :showSearch="false"
    :showPreview="false"
    :showSkinTones="false"
    :showCategories="true"
    :emojiTooltip="false"
    :i18n="i18n"
    :native="true"
    @select="handleSelect"
  />
</template>

<script setup lang="ts">
// Import data/twitter.json to reduce size, all.json contains data for
// all emoji sets.
import data from 'emoji-mart-vue-fast/data/apple.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'

// Vue 3, import components from `/src`:
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'

const emojiIndex = new EmojiIndex(data, {
  exclude: ['flags'],
  recentLength: 9
})
const i18n = {
  categories: {
    recent: '最近',
    smileys: '表情符号',
    people: '人物',
    nature: '动物与自然',
    foods: '食物与饮料',
    activity: '活动',
    places: '旅行与地点',
    objects: '物体',
    symbols: '符号',
    flags: '旗帜'
  }
}
const emit = defineEmits<{
  select: [string]
}>()

const handleSelect = (emoji: any) => {
  console.log(emoji)
  emit('select', emoji.native)
}
</script>

<style scoped></style>
